import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import PropTypes from 'prop-types'
import ResponsiveImage from '@/components/ResponsiveImage'
import css from './postArticle.module.scss'
import { formatNumber } from '@/utils'
class SpacePostArticle extends PureComponent {
    static propTypes = {
        id: PropTypes.oneOfType([
            PropTypes.number,
            PropTypes.string
        ]),
        title: PropTypes.string,
        pictures: PropTypes.array,
        summary: PropTypes.string,
        view: PropTypes.number
    }
    
    state = {
        size: '@702w_206h_1c'
    }

    handleArticle = () => {
        this.props.history.push(`/article/${this.props.id}`)
    }

    render() {
        const { title, summary, view, pictures } = this.props
        const { size } = this.state
        return (
            <div className={css["wrap"]} onClick={this.handleArticle}>
                <div className="title">{ title }</div>
                <ul className="imgs">
                    {
                        pictures.map((item, index) => {
                            return (
                                <li className="cell" key={'ap'+index}>
                                    <ResponsiveImage className="img" src={item} size={size} />
                                </li>
                            )
                        })
                    }
                </ul>
                <div className="content">
                    <div className="summary">{ summary }</div>
                    <div className="count">{ formatNumber(view) }阅读</div>
                </div>
            </div>
        )
    }
}

export default withRouter(SpacePostArticle)